<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/carousel.css">
    <script src="${pageContext.request.contextPath}/resources/jquery/jquery-2.1.1.min.js"></script>
    <style>
        h3 {
            font-weight: bold;
        }

        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        /* 侧栏导航 */

        .sideBox .hd h3 span {
            font-weight: bold;
            font-size: 14px;
            color: #fff;
        }

        .sideBox .bd {
            padding: 5px 0 0;
        }

        #sideMenu .bd li {
            margin-bottom: 2px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            overflow: hidden;
        }

        #sideMenu .bd li a {
            display: block;
            background: #EAE6DD;
        }

        #sideMenu .bd li a:hover {
            background: #D5CFBF;
        }

        /* 列表页 */
        #mainBox1 {
            margin-bottom: 10px;
            padding: 10px;
            background: #fff;
            overflow: hidden;
        }

        #mainBox1 .mHd {
            border-bottom: 2px solid #09c;
            height: 30px;
            line-height: 30px;
        }

        #mainBox1 .mHd h3 {
            display: initial;
            *display: inline;
            zoom: 1;
            padding: 0 15px;
            background: #09c;
            color: #fff;
        }

        #mainBox1 .mHd h3 span {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

        #mainBox1 .path {
            float: right;
        }

        /* 列表页 */
        #mainBox2 {
            margin-bottom: 10px;
            padding: 10px;
            background: #fff;
            overflow: hidden;
        }

        #mainBox2 .mHd {
            border-bottom: 2px solid #09c;
            height: 30px;
            line-height: 30px;
        }

        #mainBox2 .mHd h3 {
            display: initial;
            *display: inline;
            zoom: 1;
            padding: 0 15px;
            background: #09c;
            color: #fff;
        }

        #mainBox2 .mHd h3 span {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

        #mainBox2 .path {
            float: right;
        }

        /* 列表页 */
        #mainBox3 {
            margin-bottom: 10px;
            padding: 10px;
            background: #fff;
            overflow: hidden;
        }

        #mainBox3 .mHd {
            border-bottom: 2px solid #09c;
            height: 30px;
            line-height: 30px;
        }

        #mainBox3 .mHd h3 {
            display: initial;
            *display: inline;
            zoom: 1;
            padding: 0 15px;
            background: #09c;
            color: #fff;
        }

        #mainBox3 .mHd h3 span {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

        #mainBox3 .path {
            float: right;
        }

        /* 位置导航 */
        .path {
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
        }

        .path a, .path span {
            margin: 0 5px;
        }

        #myCarousel {
            position: relative;
            top: 50px;
        }

        #logoimg {
            float: left;
            width: 150px;
            height: 50%;
            padding: 5px 5px;
        }

        #time1 {
            display: inherit;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper ">
    <div class="container ">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <img id="logoimg" src="${pageContext.request.contextPath}/resources/img/logo2.png"/>
                    <a class="navbar-brand" href="${pageContext.request.contextPath}/index.jsp" style="font-size:32px;">在线报修平台</a>
                </div>
                <c:if test="${account == null}">
                    <div id="navbar" class="navbar-collapse collapse" style="float:right;">
                        <%--动态显示时间--%>
                        <span id="time1"
                              style="color: #f7f7f9;float: left;font-family: 微软雅黑;font-weight: bold;padding-top: 3%"></span>
                        <script type="text/javascript">
                            //非动态显示
                            //document.getElementById('time1').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());
                            //动态显示时间
                            setInterval("document.getElementById('time1').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());", 1000);
                        </script>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="${pageContext.request.contextPath}/page/login-user.jsp">用户登录</a></li>
                            <li><a href="${pageContext.request.contextPath}/page/login-leader.jsp">负责人登录</a></li>
                            <li><a href="${pageContext.request.contextPath}/page/register.jsp">我要注册</a></li>
                            <li class="dropdown">
                        </ul>
                    </div>
                </c:if>
                <c:if test="${account !=null && hasRole == 'hasUser'}">
                    <div id="navbar1" class="navbar-collapse collapse" style="float:right;">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                    class="glyphicon glyphicon-user"></i>欢迎 &nbsp; ${account}&nbsp;<span
                                    class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a rel="nofollow" href="${pageContext.request.contextPath}/userpage"><i
                                            class="glyphicon glyphicon-th-large"></i> 报修申请</a>
                                    </li>
                                    <li>
                                        <a rel="nofollow" href="${pageContext.request.contextPath}/userpage-2"><i
                                            class="glyphicon glyphicon-edit"></i> 我的报修</a>
                                    </li>
                                    <li>
                                        <a rel="nofollow" href="${pageContext.request.contextPath}/userpage-3"><i
                                            class="glyphicon glyphicon-user"></i> 修改信息</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a href="${pageContext.request.contextPath}/user/quit"><i
                                        class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </c:if>
                <c:if test="${account !=null && hasRole == 'hasLeader'}">
                    <div id="navbar1" class="navbar-collapse collapse" style="float:right;">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                    class="glyphicon glyphicon-user"></i>欢迎 &nbsp; ${account}&nbsp;<span
                                    class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">

                                    <li>
                                        <a rel="nofollow" href="${pageContext.request.contextPath}/leaderpage"><i
                                            class="glyphicon glyphicon-th-large"></i>报修申请单</a>
                                    </li>
                                    <li>
                                        <a rel="nofollow" href="${pageContext.request.contextPath}/gaipaipage"><i
                                            class="glyphicon glyphicon-th-large"></i>改派申请</a>
                                    </li>
                                    <li>
                                        <a rel="nofollow" href="${pageContext.request.contextPath}/qjListpage"><i
                                            class="glyphicon glyphicon-th-large"></i>请假申请单</a>
                                    </li>
                                    <li>
                                        <a rel="nofollow"
                                           href="${pageContext.request.contextPath}/tbQingjia/inQingJiaPage?leaderAccount=${account}"><i
                                            class="glyphicon glyphicon-th-large"></i>请假申请</a>
                                    </li>
                                    <li>
                                        <a rel="nofollow" href="${pageContext.request.contextPath}/leaderpage-3"><i
                                            class="glyphicon glyphicon-user"></i> 修改信息</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a href="${pageContext.request.contextPath}/user/quit"><i
                                        class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </c:if>
                <c:if test="${account !=null && hasRole == 'hasAdmin'}">
                    <div id="navbar1" class="navbar-collapse collapse" style="float:right;">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                    class="glyphicon glyphicon-user"></i>欢迎 &nbsp; ${account}&nbsp;<span
                                    class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                        <%--留空--%>
                                    <li class="divider"></li>
                                    <li><a href="${pageContext.request.contextPath}/user/quit"><i
                                        class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </c:if>
            </div>
        </nav>

    </div>
</div>


<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="${pageContext.request.contextPath}/resources/img/carousel-2.jpg" alt="First slide">
        </div>
        <div class="item">
            <img src="${pageContext.request.contextPath}/resources/img/carousel-1.jpg" alt="Second slide">
        </div>
        <div class="item">
            <img src="${pageContext.request.contextPath}/resources/img/carousel-3.jpg" alt="Third slide">
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- /.carousel -->


<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-4 column">
                <div class="box ui-draggable" id="mainBox3">
                    <div class="mHd" style="">
                        <div class="path">
                            <a href="/tbEssay/queryAllBytype?essayType=3">更多...</a>
                        </div>
                        <h3 id="biaoti3">
                            展示
                            <small style="color:#FFF;">热话题</small>
                        </h3>
                    </div>
                    <div class="mBd" style="padding-top:10px;">
                        <ul id="divshow3" class="thumbnails">

                        </ul>
                    </div>
                </div>

            </div>

            <div class="col-md-4 column">
                <div class="box ui-draggable" id="mainBox1">
                    <div class="mHd" style="">
                        <div class="path">
                            <a href="/tbEssay/queryAllBytype?essayType=1">更多...</a>
                        </div>
                        <h3 id="biaoti1">
                            展示
                            <small style="color:#FFF;">电脑入门</small>
                        </h3>
                    </div>
                    <div class="mBd" style="padding-top:10px;">
                        <ul id="divshow" class="thumbnails">

                        </ul>
                    </div>
                </div>

            </div>
            <div class="col-md-4 column">
                <div class="box ui-draggable" id="mainBox2">
                    <div class="mHd" style="">
                        <div class="path">
                            <a href="/tbEssay/queryAllBytype?essayType=2">更多...</a>
                        </div>
                        <h3 id="biaoti2">
                            展示
                            <small style="color:#FFF;">常见问题</small>
                        </h3>
                    </div>
                    <div class="mBd" style="padding-top:10px;">
                        <ul id="divshow2" class="thumbnails">

                        </ul>
                    </div>
                </div>

            </div>

        </div>
    </div>
    <!-- FOOTER -->
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="#">关于我们</a> | <a rel="nofollow"
                                                                 href="#">服务条款</a> |<a
                        rel="nofollow" href="/page/login-admin.jsp"
                        style="text-decoration:none;color: #13A8F8; ">管理员登陆</a>| <a
                        rel="nofollow" href="#">联系我们</a>
                    </div>
                    <div class="copyRight">
                        Copyright ?2019-2020bs.com 版权所有
                    </div>
                </div>

            </div>
        </div>
    </div>

</div><!-- /.container -->


<script src="${pageContext.request.contextPath}/resources/jquery/jquery-2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/script/docs.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/script/back-to-top.js"></script>
</body>
<script>

    $("[data-toggle='tooltip']").tooltip();

    //js转换时间格式
    Date.prototype.format = function (format) {

        var o = {
            "M+": this.getMonth() + 1, // month
            "d+": this.getDate(), // day
            "h+": this.getHours(), // hour
            "m+": this.getMinutes(), // minute
            "s+": this.getSeconds(), // second
            "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
            "S": this.getMilliseconds()
            // millisecond
        }
        if (/(y+)/.test(format)) {
            format = format.replace(RegExp.$1, (this.getFullYear() + "")
                .substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
                    : ("00" + o[k]).substr(("" + o[k]).length));
            }
        }
        return format;
    }

    $(function () {
        //请求此页面就加载
        $.ajax({
            url: "/tbEssay/queryAllOrderByIdDesc",
            data: {
                essayType: 1
            },
            type: "GET",
            success: function (data, status) {
                console.log(typeof data.list);
                show(data);
            }
        });

        //展示数据模块
        function show(data) {
            var html = '';
            for (var i = 0; i < data.list.length; i++) {
                html +=
                    '<li class="span4">' +
                    '<div class="caption" >' +
                    '<p style="text-overflow:ellipsis;white-space:nowrap; overflow:hidden;"><a href="/tbEssay/selectOne?essayId=' + data.list[i].essayId + '"><span style="color: #2a6496; font-family: 微软雅黑;font-size: medium" data-toggle="tooltip" title="' + data.list[i].essayTitle + '">' + data.list[i].essayTitle + '</span></a></p>' +
                    '<p style="text-overflow:ellipsis;"><span data-toggle="tooltip" title="' + data.list[i].essayBrief + '">' + data.list[i].essayBrief + '</span></p>' +
                    '<p align="right"><span style="color: #d43f3a; font-family: 微软雅黑;font-size: medium">' + new Date(data.list[i].addTime).format("yyyy-MM-dd hh:mm:ss") + '</span></p>' +
                    '</div>' +
                    '</div>' +
                    '</li><hr>'


            }
            $("#divshow").html(html);
        };
        //请求此页面就加载
        $.ajax({
            url: "/tbEssay/queryAllOrderByIdDesc",
            data: {
                essayType: 2
            },
            type: "GET",
            success: function (data, status) {
                console.log(typeof data.list);
                show2(data);
            }
        });

        //展示数据模块
        function show2(data) {
            var html = '';
            for (var i = 0; i < data.list.length; i++) {
                html +=
                    '<li class="span4">' +
                    '<div class="caption" ' +
                    '<p style="text-overflow:ellipsis;white-space:nowrap; overflow:hidden;"><a href="/tbEssay/selectOne?essayId=' + data.list[i].essayId + '"><span style="color: #2a6496; font-family: 微软雅黑;font-size: medium" data-toggle="tooltip" title="' + data.list[i].essayTitle + '">' + data.list[i].essayTitle + '</span></a></p>' +
                    '<p style="text-overflow:ellipsis;"><span data-toggle="tooltip" title="' + data.list[i].essayBrief + '">' + data.list[i].essayBrief + '</span></p>' +
                    '<p align="right"><span style="color: #d43f3a; font-family: 微软雅黑;font-size: medium">' + new Date(data.list[i].addTime).format("yyyy-MM-dd hh:mm:ss") + '</span></p>' +
                    '</div>' +
                    '</div>' +
                    '</li><hr>'


            }
            $("#divshow2").html(html);
        };
        //请求此页面就加载
        $.ajax({
            url: "/tbEssay/queryAllOrderByIdDesc",
            data: {
                essayType: 3
            },
            type: "GET",
            success: function (data, status) {
                console.log(typeof data.list);
                show3(data);
            }
        });

        //展示数据模块
        function show3(data) {
            var html = '';
            for (var i = 0; i < data.list.length; i++) {
                html +=
                    '<li class="span4">' +
                    '<div class="caption">' +
                    '<p style="text-overflow:ellipsis;white-space:nowrap; overflow:hidden;"><a href="/tbEssay/selectOne?essayId=' + data.list[i].essayId + '"><span style="color: #2a6496; font-family: 微软雅黑;font-size: medium" data-toggle="tooltip" title="' + data.list[i].essayTitle + '">' + data.list[i].essayTitle + '</span></a></p>' +
                    '<p style="text-overflow:ellipsis;"><span data-toggle="tooltip" title="' + data.list[i].essayBrief + '">' + data.list[i].essayBrief + '</span></p>' +
                    '<p align="right"><span style="color: #d43f3a; font-family: 微软雅黑;font-size: medium">' + new Date(data.list[i].addTime).format("yyyy-MM-dd hh:mm:ss") + '</span></p>' +
                    '</div>' +
                    '</div>' +
                    '</li><hr>'


            }
            $("#divshow3").html(html);
        };
    });
</script>
</html>